<template>
  <el-dialog
    title="流程详情"
    append-to-body
    :visible="visibleShow"
    :close-on-click-modal="true"
    width="800px"
    :before-close="handleUserInfoClose"
  >
    <div>
      <el-row class="detailRow">
        <el-col :span="12">流程名称：{{ detailData.name }}</el-col>
        <el-col :span="12">办理人：{{ detailData.receiverName }}</el-col>
      </el-row>
      <el-row class="detailRow">
        <el-col :span="12">备注：{{ detailData.remake }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>
            <img :src="processImageUrl" class="img-size" alt="" />
          </div>
        </el-col>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="handleExamine"
        :disabled="activeName === 'listDone' || activeName === 'first'"
      >
        审批
      </el-button>
      <!-- <el-button @click="handleCancel">
        退回
      </el-button> -->
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: ["visibleShow", "detailData", "processImageUrl", "activeName"],
  data() {
    return {};
  },
  methods: {
    handleUserInfoClose() {
      this.$emit("CloseDetail", false);
    },
    // 审批
    handleExamine() {
      this.$emit("DetailExamine");
    },
    // 退回
    // handleCancel() {
    //   this.$emit("DetailCancel");
    // },
  },
     watch: {
    "processImageUrl"(val) {
      console.log(val, 'vallll')
    }
  }
};
</script>
<style scoped lang="scss">
.detailRow {
  line-height: 40px;
}
.img-size {
  width: 740px;
  height: 180px;
  margin-top: 30px;
  // cursor: pointer;
}
</style>
